<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LOUIS VUITTON Collections</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <nav class="top-nav">
            <div class="nav-left">
                <button class="menu-btn">Menu</button>
                <button class="search-btn">Search</button>
            </div>
            <div class="logo">
                <a href="/">LOUIS VUITTON</a>
            </div>
            <div class="nav-right">
                <button class="call-btn">Call Us</button>
                <button class="wishlist-btn">Wishlist</button>
                <button class="account-btn">Account</button>
                <button class="cart-btn">Cart</button>
            </div>
        </nav>
    </header>

    <main>
        <div class="category-nav">
            <ul>
                <li><a href="index.html">All Brands</a></li>
                <li class="active"><a href="lv-products.html">Louis Vuitton</a></li>
                <li><a href="dior-products.html">Dior</a></li>
                <li><a href="chanel-products.html">Chanel</a></li>
                <li><a href="hermes-products.html">Hermès</a></li>
                <li><a href="gucci-products.html">Gucci</a></li>
            </ul>
        </div>

        <div class="products-grid">
            <a href="detail.html" class="product-card">
                <button class="wishlist-icon">♡</button>
                <div class="product-image">
                    <img src="https://us.louisvuitton.com/images/is/image/lv/1/PP_VP_L/louis-vuitton-double-card-holder-monogram-eclipse-canvas-card-holders-and-wallets--M80143_PM2_Front%20view.png" alt="Double Card Holder">
                </div>
                <div class="product-info">
                    <h3>Double Card Holder</h3>
                    <p class="description">Monogram Eclipse canvas</p>
                    <p class="price">HK$ 2,850</p>
                </div>
            </a>

            <a href="detail.html" class="product-card">
                <button class="wishlist-icon">♡</button>
                <div class="product-image">
                    <img src="https://us.louisvuitton.com/images/is/image/lv/1/PP_VP_L/louis-vuitton-pocket-organizer-damier-graphite-canvas-wallets-and-small-leather-goods--N63143_PM2_Front%20view.png" alt="Pocket Organizer">
                </div>
                <div class="product-info">
                    <h3>Double Card Holder</h3>
                    <p class="description">Damier Graphite canvas</p>
                    <p class="price">HK$ 3,350</p>
                    <p class="pre-order">Pre-order now</p>
                </div>
            </a>
            <!-- 添加更多产品... -->
        </div>
        <div class="view-more">
            <button class="view-more-btn">View More</button>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>HELP</h3>
                <p>Please reach our client services team at <a href="tel:+85281001182" class="phone-number">+852 8100 1182</a>, <a href="#" class="whatsapp">WhatsApp</a> or <a href="#" class="click-here">click here</a> for more information.</p>
                <a href="#">FAQ</a>
                <a href="#">Product Care</a>
                <a href="#">Stores</a>
            </div>

            <div class="footer-section">
                <h3>SERVICES</h3>
                <a href="#">Repair and Maintenance</a>
                <a href="#">Personalization</a>
                <a href="#">Art of Gifting</a>
                <a href="#">Download our Apps</a>
            </div>

            <div class="footer-section">
                <h3>ABOUT LOUIS VUITTON</h3>
                <a href="#">Fashion Shows</a>
                <a href="#">Arts & Culture</a>
                <a href="#">La Maison</a>
                <a href="#">Sustainability</a>
                <a href="#">Latest News</a>
                <a href="#">Jobs</a>
                <a href="#">Foundation Louis Vuitton</a>
            </div>

            <div class="footer-section">
                <h3>CONNECT</h3>
                <p class="signup-text">Sign up for Louis Vuitton emails and receive the latest news from the Maison, including Exclusive Digital Prelaunch and new collections.</p>
                <p>Follow Us</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html> 